<template>
  <div class="main_tabnavbar_container">
    <ul>
      <li v-for="(item, index) in mainItems" :key="index" @click="handleChangePage(index)">
        <div class="tabbar_item">
          <img :src="item.icon" alt="">
          <span>{{item.lab}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      currentPage: 0,
      mainItems:[{
        icon:require('@/assets/icons/home.png'),
        lab:'首页',
      }, {
        icon:require('@/assets/icons/ms.png'),
        lab:'模拟',
      }, {
        icon:require('@/assets/icons/net.png'),
        lab:'技巧',
      }, {
        icon:require('@/assets/icons/user.png'),
        lab:'我的',
      }
    ],
    }
  },

  methods:{
    handleChangePage(index){
      this.currentPage = index;
      if(index === 0){
        this.$router.replace('/home')
      }else if(index === 1){
        this.$router.replace('/mock')
      }else if(index === 2){
        this.$router.replace('/teclolege')
      }else if(index === 3){
        this.$router.replace('/profile')
      }
    }
  }
}
</script>

<style lang="less" scoped>

.main_tabnavbar_container{
  width: 100%;
  height: 49px;
  background-color: #fff;
  border-top: 1px solid #eee;

  ul{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 49px;

    li{
      flex: 1;
      height: 49px;

      .tabbar_item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 49px;

        img{
          width: 18px;
          height: 18px;
        }

        span{
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }

  }
}

</style>